<template>
  <div>
    <!-- 用户添加 -->
    <div>
      <el-form :model="form">
        <el-form-item label="角色">
          <el-checkbox-group v-model="CheckData" size="medium">
            <el-checkbox-button
              v-for="item in rolelist"
              :key="item.Id"
              :label="item.Id"
              >{{ item.RoleName }}</el-checkbox-button
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="form.UserName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input
            v-model="form.Password"
            v-show="isshow"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="form.UserAge" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.Email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.RealName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.Phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddRole">确定</el-button>
        <el-button type="primary" @click="UpdateRole(form.Id)">编辑</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    Userids: null,
  },
  data() {
    return {
      form: {
        AddUserRoleDtosList: [],
        UpdateUserRoleDtosList: [],
      },
      CheckData: [],
      rolelist: [],
      infolist: [],
      dialogFormVisible: true,
      isshow: true,
    };
  },
  //加载
  created() {
    this.GetRole();
    if (this.Userids != null) {
      this.GetinfoRole();
    }
  },
  methods: {
    //添加
    AddRole() {
      this.form.AddUserRoleDtosList = [];
      this.CheckData.forEach((x) => {
        this.form.AddUserRoleDtosList.push({
          RoleId: x,
        });
      });
      this.axios
        .post("http://localhost:15670/api/RoleUser/AddUserRole", this.form)
        .then((res) => {
          if (res.data.Success) {
            this.$message.success("添加成功！");
            this.$emit("Colseupdate");
          } else {
            this.$message.error("添加失败！");
          }
        });
    },
    //修改
    UpdateRole(id) {
      this.form.UpdateUserRoleDtosList = [];
      this.CheckData.forEach((x) => {
        this.form.UpdateUserRoleDtosList.push({
          RoleId: x,
          UserId: id,
        });
      });
      this.axios
        .put("http://localhost:15670/api/RoleUser/UpdateRole", this.form)
        .then((res) => {
          if (res.data.Success) {
            this.$message.success(res.data.Message);
            this.$emit("Colseupdate");
          } else {
            this.$message.error(res.data.Success);
          }
        });
    },
    //角色
    GetRole() {
      this.axios
        .get("http://localhost:15670/api/RoleUser/GetRoleDto")
        .then((res) => {
          this.rolelist = res.data.Data;
        });
    },
    //获取数据
    GetinfoRole() {
      this.dialogFormVisible = true;
      this.isshow = false;
      this.axios
        .get(
          "http://localhost:15670/api/RoleUser/GetUserinfoRole?id=" +
            this.Userids
        )
        .then((res) => {
          res.data.Data.forEach((res) => {
            this.form = res;
          });
          res.data.Data.forEach((res) => {
            res.LisrUserRoleDtosList.forEach((res) => {
              this.CheckData.push(res.RoleId);
            });
          });
        });
    },
  },
};
</script>
